<template>
  <div class="home_box">
    <leftnav></leftnav>
    <div class="content_box">
      <div class="top_nav">
        <topnav></topnav>
      </div>
      <div class="content">
        <div class="content_header">
          <div class="header_i1">
            <div class="header_i1_tit">商品列表</div>
            <div class="header_i1_right" @click="xinZengfn">新增</div>
          </div>
        </div>
        <div class="content_item">
          <div class="content_itps">
            <div class="content_tit1" style="width: 230px">商品名称</div>
            <div class="content_tit1" style="width: 100px;">商品图片</div>
            <div class="content_tit1" style="width: 100px;">商品价格</div>
            <div class="content_tit1" style="width: 100px;">是否推荐</div>
            <div class="content_tit1" style="width: 230px">商品分类</div>
            <div class="content_tit1" style="width: 230px">商品原价</div>
            <div class="content_tit1" style="width: 200px">商品描述</div>
            <div class="content_tit1" style="width: 230px">操作</div>
          </div>
          <div class="content_itembox">
            <div class="shangPing_item" v-for="item in goodsarr">
              <div class="shangPing_tit" style="width: 230px">{{item.goods_name}}</div>
              <div class="shangPing_img" style="width: 100px;">
                <img :src="item.goods_imgs">
              </div>
              <div class="shangPing_num" style="width: 100px;">{{item.goods_present_price}}</div>
              <div class="shangPing_tuiJian" style="width: 100px;">
                <span v-show="item.goods_is_recommend==2">推荐</span>
                <span v-show="item.goods_is_recommend==1">不推荐</span>
              </div>
              <div class="shangPing_fenLei" style="width: 230px">{{item.goods_cate_name}}</div>
              <div class="shangPing_num2" style="width: 230px">{{item.goods_original_price}}</div>
              <div class="shangPing_miaoSu" style="width: 200px">{{item.goods_describe}}</div>
              <div class="shangPing_caoZuo" style="width: 230px">
                <div class="caoZuo1" @click="goodseditfn(item)">编辑</div>
                <div class="caoZuo2" @click="shanchufn(item)">删除</div>
              </div>
            </div>
          </div>
        </div>
        <div class="fenye">
          <el-pagination
            background
            @current-change="fenyefn"
            layout="prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import leftnav from "@/components/nav/leftnav";
  import topnav from "@/components/nav/topnav";
  export default {
    components: {leftnav,topnav},
    data() {
      return {
        nowpage:1,
        goodsarr:[],
        total:0,
      }
    },
    props: {},
    methods:{
      shanchufn(item) {
        let _this = this
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $.ajax({
            url: this.apis+'/admin/Goods/GoodsDel',
            data:{
              goods_id:item.id
            },
            type:'post',
            headers:{
              'token':localStorage.getItem('token')
            },
            success:function (res) {
              if (res.code==1){
                _this.getdata()
              }
            }
          })
        })
          .catch(()=>{});
      },
      goodseditfn(item) {
        this.$router.push({path:'/goods_edit',query:{id:item.id}})
      },
      handleOpen(key, keyPath) {
      },
      handleClose(key, keyPath) {
      },
      fenyefn(index) {
        this.nowpage = index
        this.getdata()
      },
      xinZengfn() {
        this.$router.push({path:'/xinZeng'})
      },
      getdata() {
        let _this = this
        $.ajax({
          url:this.apis+'/admin/Goods/GoodsList',
          data:{
            page:this.nowpage,
          },
          type:'post',
          headers:{
            'token':localStorage.getItem('token')
          },
          success:function (res) {
            _this.goodsarr = res.data.data
            _this.total = res.data.total
          }
        })
      }
    },
    mounted(){
    },
    created() {
      this.getdata()
    },
  }
</script>

<style scoped lang="less">
  .home_box{
    width: 100%;
    height: 100%;
    min-width: 1350px;
    .content_box{
      width: 87%;
      margin-left: 200px;
      .content{
        width: 100%;
        padding: 25px;
        box-sizing: border-box;
        background-color: #f2f2f2;
        .content_header{
          width: 100%;
          background-color: white;
          .header_i1{
            width: 100%;
            height: 70px;
            line-height: 70px;
            display: flex;
            justify-content: space-between;
            padding: 0 25px;
            box-sizing: border-box;
            border-bottom: 1px solid #e4e4e4;
            .header_i1_right{
              width: 70px;
              height: 40px;
              line-height: 40px;
              text-align: center;
              margin-top: 15px;
              color: #FFF;
              background-color: #409EFF;
              border-radius: 5px;
              cursor: pointer;
            }
          }
        }
        .content_item{
          width: 100%;
          background-color: white;
          .content_itps{
            width: 100%;
            height: 48px;
            line-height: 48px;
            display: flex;
            justify-content: space-around;
            font-size: 14px;
            font-weight: bold;
            color: #909399;
            padding: 0 25px;
            box-sizing: border-box;
            border-bottom: 1px solid #e4e4e4;
          }
          .content_itembox{
            width: 100%;
            padding: 0 25px;
            box-sizing: border-box;
            color: #606266;
            .shangPing_item{
              width: 100%;
              height: 70px;
              line-height: 70px;
              border-bottom: 1px solid #e4e4e4;
              display: flex;
              justify-content: space-around;
              .shangPing_tit{
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .shangPing_img{
                padding: 12px 0;
                box-sizing: border-box;
                img{
                  width: 50px;
                  height: 40px;
                }
              }
              .shangPing_miaoSu{
                padding-right: 15px;
                box-sizing: border-box;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .shangPing_caoZuo{
                display: flex;
                .caoZuo1,.caoZuo2{
                  width: 56px;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  background-color: #409EFF;
                  border-radius: 3px;
                  color: white;
                  margin-right: 15px;
                  margin-top: 20px;
                  cursor: pointer;
                }
                .caoZuo2{
                  background-color: #F56C6C;
                }
              }
            }
            .shangPing_item:hover{
              background-color: #f2f2f2;
            }
          }
        }
        .fenye{
          width: 100%;
          display: flex;
          justify-content: center;
          padding: 25px 0;
          background-color: white;
        }
      }
    }
  }
</style>
